<template>
    <div>
    
        <cu-navbar :is-back="false">
            <block slot="content">注册</block>
        </cu-navbar>
        <view class="login-home">
            <view class="bg-white" style="height: 100%;">
                <view class="content">
                    <view class="phone border">
                        <u-input v-model="mobile" height="90" type="number" maxlength="11" :placeholder-style="placeholderStyle" placeholder="请输入11位手机号" />
                    </view>
                    <view class="phone border">
                        <u-input v-model="password" height="90" type="password" :placeholder-style="placeholderStyle" placeholder="请输入密码" />
                    </view>
                    <view class="phone border">
                        <u-input v-model="inviteCode" height="90" :placeholder-style="placeholderStyle" placeholder="请输入推广码" />
                    </view>
                    <text class="submit" @click="submit">注册</text>
                    <view class="desc">
                        <text>已有用户名？点击</text>
                        <text @click="login">立即登录</text>
                    </view>
                    <view class="desc">
                        <text class='getCode shadow'  @click="copy">复制下载地址</text>
                    </view>
                </view>
            </view>
        </view>
    </div>
</template>

<script>
export default {
  computed: {
    logo() {
      return this.vuex_config.logo || "";
    },
  },
  onShow() {
    console.log("show");
  },
  onLoad(e) {
    this.inviteCode = e.code
    console.log("load");
  },
  data() {
    return {
      code: '',
      placeholderStyle: "color: #999;font-size: 30upx;",
      wx_user_id: 0,
      mobile: "",
      //captcha: "",
      inviteCode: "",
      password: "",
      state: false, //是否开启倒计时
      totalTime: 60, //总时间，单位秒
      recordingTime: 0, //记录时间变量
      currentTime: 0, //显示时间变量
    };
  },
  methods: {
    login() {
      this.$common.redirectTo(this.$ph.login);
    },
    copy() {
      uni.setClipboardData({
        //去找上面的数据
        data: 'https://apps.xfenfa.cn/Eesm',
        success: function (res) {
          uni.showToast({
            title: "复制成功",
          });
        },
        fail: function (res) {
          console.log(res);
        },
      });
    },
    checking() {
      //把显示时间设为总时间
      this.currentTime = this.totalTime;
      this.smsSend((res) => {
        if (res.code == 1) {
          //开始倒计时
          this.state = true;
          //执行倒计时
          this.checkingTime();
        }
      });
    },
    checkingTime() {
      let that = this;
      //判断是否开启
      if (this.state) {
        //判断显示时间是否已到0，判断记录时间是否已到总时间
        if (this.currentTime > 0 && this.recordingTime <= this.totalTime) {
          //记录时间增加 1
          this.recordingTime = this.recordingTime + 1;
          //显示时间，用总时间 - 记录时间
          this.currentTime = this.totalTime - this.recordingTime;
          //1秒钟后，再次执行本方法
          setTimeout(() => {
            //定时器内，this指向外部，找不到vue的方法，所以，需要用that变量。
            that.checkingTime();
          }, 1000);
        } else {
          //时间已完成，还原相关变量
          this.state = false; //关闭倒计时
          this.recordingTime = 0; //记录时间为0
          this.currentTime = this.totalTime; //显示时间为总时间
        }
      } else {
        //倒计时未开启，初始化默认变量
        this.state = false;
        this.recordingTime = 0;
        this.currentTime = this.totalTime;
      }
    },
    smsSend(callBack) {
      if (!this.$common.isPhoneNumber(this.mobile)) {
        this.$common.errorToShow("手机号码格式错误！");
        return;
      }
      this.$api
        .smsSend({
          mobile: this.mobile,
        })
        .then((res) => {
          callBack(res);
          this.$common.errorToShow(res.reason);
        });
    },
    submit() {
      this.$api
        .register({
          mobile: this.mobile,
          password: this.password,
          invitecode: this.inviteCode
        })
        .then((res) => {
          if (res.code == 1) {
            this.$common.successToShow("注册成功");
            setTimeout(() => {
              this.$common.redirectTo('/pages/login/login');
            }, 500);
          } else {
            this.$common.errorToShow(res.reason);
          }
        });
    },
  },
};
</script>

<style lang="scss">
page {
  height: calc(100vh - 0px);
  background-color: #fff;
}
.phone {
			    background: #f3f3f3;
			    border-radius: 4px;
				margin-bottom: 20rpx;
				height: 96rpx;
				.u-border {
					border: none !important;
				}
		}

.content {
  display: flex;
  flex-direction: column;
  padding: 52upx 32upx 0;

  .border {
    border-bottom: 1upx solid #e6e6e6;
  }
  .u-icon {
    margin-left: 20upx;
  }
  .u-lines {
    margin-left: 30upx !important;
  }
  text {
    color: #333;
    font-weight: bold;
    font-size: 32upx;
  }
  .desc {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 38upx;
    font-weight: normal;
    text {
      font-size: 32upx;
      color: #333;
    }
    text:last-child {
      color: rgb(255, 68, 59);
    }
  }
  .submit {
    width: 100%;
    height: 94upx;
    background: rgb(255, 68, 59);
    border-radius: 10upx;
    font-size: 36upx;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 94upx;
    margin: auto;
    margin-top: 146upx;
  }
  view {
    display: flex;
    flex-direction: row;
    align-items: center;
    image {
      margin-right: 40upx;
    }
  }
  .phone {
    .u-input {
      left: 55upx;
    }
    image {
      width: 32upx;
      height: 40upx;
    }
  }
  .password {
    .u-input {
      left: 115upx;
    }
    image {
      width: 34upx;
      height: 42upx;
    }
    .getCode,
    .daoTime {
      color: #535eff;
      font-size: 28upx;
    }
    .u-line {
      margin-right: 28upx !important;
    }
  }
  .captcha {
    .u-input {
      left: 88upx;
    }
  }
  .inviteCode {
    .u-input {
      left: 88upx;
    }
  }
}
/* #ifdef MP-WEIXIN */
page {
  height: calc(100vh - 0px);
}

.login-home {
  height: 90.8%;
}

/* #endif */
/* #ifndef MP-WEIXIN */
page {
  height: calc(100vh - 0px);
}

.login-home {
  height: 93.8%;
}

/* #endif */
</style>
